<template>
<div>
    <HomeHeader  :type_="type_"></HomeHeader>
    <v-content>
        <v-container ><v-card>
    <v-col class="main" >
        后台用户注册
        <v-form
                ref="form"
                v-model="valid"
        >
        <v-text-field
                v-for="(item,i) in itemsone"
                :key="i"
                :label="item.label"
                :rules="item.rules"
                v-model="data[item.data]"
                :counter="item.counter"
                placeholder=" "
                validate-on-blur
                required
        ></v-text-field>
        <v-expansion-panels flat popout>
        <v-expansion-panel>
            <v-expansion-panel-header>更多</v-expansion-panel-header>
            <v-expansion-panel-content>
                <v-text-field
                        v-for="(item,i) in itemstwo"
                        :key="i"
                        :label="item.label"
                        v-model="item.data"
                        placeholder=" "
                ></v-text-field>
             </v-expansion-panel-content>
            </v-expansion-panel>
                  </v-expansion-panels>
        <v-text-field
                v-model="data.adm_password"
                :append-icon="show1 ? 'mdi-eye' : 'mdi-eye-off'"
                :type="show1 ? 'text' : 'password'"
                @click:append="show1 = !show1"
                :counter="10"
                label="密码"
                hint="不能包含空格，长度在 8-10 之间，必须包含大小写字母和数字的组合，不能使用特殊字符"
                placeholder=" "
                :rules="passwordrules"
                validate-on-blur
                required
        ></v-text-field>
        <v-text-field
                :append-icon="show2 ? 'mdi-eye' : 'mdi-eye-off'"
                :type="show2 ? 'text' : 'password'"
                @click:append="show2 = !show2"
                :counter="10"
                label="再次输入密码"
                placeholder=" "
                :rules="twicerules"
                validate-on-blur
                required
        ></v-text-field>
        <div class="text-center">
<v-btn rounded color="primary" dark @click="_signup">注册</v-btn>
        </div>
    </v-form>
        </v-col>
        </v-card>
            <v-alert v-model=alert.show  :type=alert.type dismissible>{{alert.resultMsg}}
</v-alert>
        </v-container >
    </v-content>
    <Home-Footer :type_="type_"></Home-Footer>
  </div>
</template>
<script>
  export default {
  data() {
    return {
        type_:"adm",
        valid:false,
        show1:null,
        show2:null,
        itemsone:[
            {label:"姓名",
                data:'adm_name',
                rules:[
          value => !!value || '姓名不可以为空'
          ]},
            {label:"手机号码",
                data:'adm_contact',
                counter:11,
                rules:[
                    value => !!value || '手机号不可以为空',
                    value => {
                        const pattern = /^1[3|4|5|7|8][0-9]{9}$/
                        return pattern.test(value) || '手机号不合法'
                    }
                ]},
        ],
        itemstwo:[
            {label:"年龄",data:''},
            {label:"性别",data:''},
            {label:"住址",data:''},
            {label:"邮箱",data:''},
            {label:"身份证",data:''},
        ],
        passwordrules:[
            value => !!value || '密码不可以为空',
            value =>{
                var pattern =/^\S*$/
                return pattern.test(value) || '密码不能包含空格'
            },
            value => {
                const pattern = /^.{8,10}$/
                return pattern.test(value) || '密码长度不对，应为8-10个字符'
            },
            value => {
                const pattern = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,10}$/
                return pattern.test(value) || '密码不合法'
            }],
        twicerules:[
            value=>value==this.data.adm_password||'两次输入密码应相同'
        ],
    data:{
        adm_name:'',
        adm_password:'',
        adm_contact:'',
        adm_age:'',
        adm_sex:'',
        adm_address:'',
        adm_email:'',
        adm_idcard:'',
    },
        alert:{
            show:false,
            type:'',
            resultMsg:''
        }
    }
  },methods: {
_signup(){
    this.$refs.form.validate()
    if(this.valid){
    var params=this.data
    params._option ='1000'
    this.$http.post(params,2).then((res)=>{
        let { resultCode, resultMsg } = res
        if(resultCode==0)
        {this.$refs.form.reset()
            this.alert.type="success"
        }
        else{
            this.alert.type="error"
        }
        this.alert.resultMsg=resultMsg
        this.alert.show="success"
    }).catch((err)=>{
        this.response=err
    })
    }
}
  }
}
</script>


<style  scoped>
</style>
